<template>
    <div>
        <el-input v-model="input1" placeholder="Please input">
            <template #prepend>http://</template>
        </el-input>
    </div>
    <div class="mt-4">
        <el-input v-model="input2" placeholder="Please input">
            <template #append>.com</template>
        </el-input>
    </div>
    <div class="mt-4">
        <el-input v-model="input3" placeholder="Please input" class="input-with-select">
            <template #prepend>
                <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="Restaurant" value="1" />
                    <el-option label="Order No." value="2" />
                    <el-option label="Tel" value="3" />
                </el-select>
            </template>
            <template #append>
                <el-button icon="Search" />
            </template>
        </el-input>
    </div>
    <div class="mt-4">
        <el-input v-model="input3" placeholder="Please input" class="input-with-select">
            <template #prepend>
                <el-button icon="Search" />
            </template>
            <template #append>
                <el-select v-model="select" placeholder="Select" style="width: 115px">
                    <el-option label="Restaurant" value="1" />
                    <el-option label="Order No." value="2" />
                    <el-option label="Tel" value="3" />
                </el-select>
            </template>
        </el-input>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const input1 = ref("");
const input2 = ref("");
const input3 = ref("");
const select = ref("");
</script>

<style>
.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}
</style>
